<template>
  <div id="code-map-manager">
    <v-header title="代码映射" :showDownloadBtn="false" :saveShow="false"></v-header>
    <el-container class="code-map-box">
      <el-header class="header-tool-bar" height="50px">
        <!-- 顶部按钮 -->
        <el-row :gutter="24" justify="space-between">
          <el-col :span="12">
            <el-button type="primary" size="mini" @click.stop="addBtnClicked">增加</el-button>
            <!-- <el-button type="primary" size="mini" @click.stop="editBtnClicked">编辑</el-button> -->
            <el-button type="primary" size="mini" @click.stop="delBtnClicked">删除</el-button>
            <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
          </el-col>
          <el-col :span="12">
            <div class="keyword-query">
              <el-input  v-model="searchKeyword" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                clearable></el-input>
              <el-button type="primary" size="mini" @click="queryKeyWord">查询</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main class="main-table-box">
        <v-table ref="dataGrid"></v-table>
      </el-main>
    </el-container>
    <v-dialog ref="addModifyDialog" :dialogMode= "dialogMode" @submitAfter = "submitAfter"></v-dialog>
  </div>
</template>
<script>
import ajax from '../../../../api/ajax/ajax'
import api from '../../../../api/url'
import {VHeader} from '../../../../components'
import VTable from './comm/metaCodeMapTableGird.vue'
import VDialog from './comm/mdbAddModifyDialog.vue'
  export default{
    data () {
      return {
        dialogMode: '',
        searchKeyword: ''
      }
    },
    components: {
      VHeader,
      VTable,
      VDialog
    },
    methods: {
      addBtnClicked () {
        this.dialogMode = 'ADD'
        this.$refs.dataGrid.clearSelection()
        this.$refs.addModifyDialog.open()
      },
      // editBtnClicked () {
      //   this.dialogMode = 'MODIFY'
      //   let selections = this.$refs.dataGrid.getSelections()
      //   if (selections && selections.length > 0) {
      //     if (selections.length === 1) {
      //       let selection = selections[0]
      //       this.$refs.addModifyDialog.editShow(selection)
      //     } else {
      //       this.$message.error('只能选择一条')
      //     }
      //   } else {
      //     this.$message.error('请至少选择一条记录进行编辑')
      //   }
      // },
      // 删除按钮被点击
      delBtnClicked () {
        let selections = this.$refs.dataGrid.getSelections()
        let list = this.$refs.dataGrid.getList()
        if (selections && selections.length > 0) {
          this.$confirm('是否删除所选记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let remdata = {
              key_list: list
            }
            ajax.post(api.DELETE_METACODEMAP, remdata).then((res) => {
              this.refresh()
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除'
            // })
          })
        } else {
          this.$message.error('请选择一条记录进行删除')
        }
      },
      refresh () {
        this.$refs.dataGrid.getData()
      },
      submitAfter () {
        this.refresh()
      },
      queryKeyWord () {
        this.$refs.dataGrid.getDataByKeyword(this.searchKeyword)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #code-map-manager
    height 100%
    position relative
    .code-map-box
      height 100%
      padding 10px 0px 20px 10px
      .header-tool-bar
        line-height 50px
        vert-align middle
        background-color #FFFFFF
        margin-bottom 3px
        .keyword-query
          width 300px
          float right
          margin-right -10px
        .el-input--mini
          width 200px
        .el-button--danger
          background-color #016DFB
          border-color #016DFB
        .dialog-input
          width 210px
          height 30px
          border-radius 4px
          border 1px solid #D8DCE5
      .main-table-box
        padding 0px 0px
        height 100%
        background-color #fff
        .el-table
          padding-bottom 74px
        .el-pagination
          z-index 5
          height 36px
          background-color #fff
          position absolute
          width 100%
          bottom 0px
          padding-bottom 4px
          border-top solid 1px #f4f4f4
</style>
